<template>
    <div class="main-con editHorsemanOrderData">
        <!-- 顶部导航 -->
        <div class="breadcrumb-con">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/index/horsemanOrderData' }">骑手派单数据</el-breadcrumb-item>
                <el-breadcrumb-item>{{ editText }}骑手派单数据详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <!-- 搜索框 -->
        <div class="search-con">
            <div class="search-item">
                <div class="search-item-title">订单日期</div>
                <div class="search-item-input">
                    <el-date-picker size="mini" :editable="false" class="w200" v-model="formData.beginTime" type="date"
                        placeholder="请选择开始时间" value-format="yyyy-MM-dd" :clearable="false"></el-date-picker>
                </div>
                <div>~</div>
                <div class="search-item-input">
                    <el-date-picker size="mini" :editable="false" class="w200" v-model="formData.endTime" type="date"
                        placeholder="请选择结束时间" value-format="yyyy-MM-dd" :clearable="false"></el-date-picker>
                </div>
            </div>
            <div class="search-item">
                <div class="search-item-title"></div>
                <el-button size="mini" type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
                <el-button size="mini" type="primary" icon="el-icon-delete" @click="handleClear">清空</el-button>
            </div>
        </div>

        <!-- 表格数据 -->
        <div class="table-con" v-loading="loading">
            <el-table :data="tableData" size="mini" :header-cell-style="{background:'#f8f8f8'}" style="width: 100%">
                <el-table-column type="index" label="序号" width="50" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="courier" label="用户名称" width="" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="courierPhone" label="手机号" width="" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="time" label="订单日期" width="" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="total" label="完成派单统计" width="" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="success" label="配送量" width="" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column label="超时量" width="" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span>{{scope.row.timeout}}</span><br />
                        <el-button type="primary" icon="" @click="handelDetail(scope.row)" size="mini">查看订单</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="cancel" label="取消量" width="" align="center" :show-overflow-tooltip="true">
                </el-table-column>
            </el-table>
        </div>

        <!-- 表格分页 -->
        <div class="pagination-con">
            <m-pagination :currentPage="formData.pageNum" :pageSize="formData.pageSize" :total="total"
                @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange">
            </m-pagination>
        </div>

        <el-dialog title="订单超时详情" :visible.sync="showTimeoutCon">
            <el-table :data="detialTableData" border size="mini" :header-cell-style="{background:'#f8f8f8'}" style="width: 100%">
                <el-table-column property="orderNo" label="订单号" width="" align="center" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column property="createTime" label="实际送达时间" width="" align="center" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column label="超时时长" width="" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span>{{timeTransform(scope.row.diffTime)}}</span>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
import {
    queryHorsemanOrderDetailInfo,
    queryOrderDetailInfo
} from "@/common/service/statisticsManagement/horsemanOrderData.js";
import mPagination from "@/components/m-pagination/m-pagination";
export default {
    name: "editHorsemanOrderData",
    data() {
        return {
            editType: "", //操作类型  detail=查看
            editText: "", //操作文字
            editId: "", //操作的id

            //搜索条件
            formData: {
                courierId: "",
                beginTime: "",
                endTime: "",
                pageNum: 1,
                pageSize: 10
            },
            //表格数据
            tableData: [], //表格信息
            total: null, //表格总条数
            loading: false, //表格加载动画

            //查看订单详情的标识
            showTimeoutCon: false,
            //订单详情表格数据
            detialTableData: []
        };
    },
    created() {
        this.editType = this.$route.query.editType;
        this.editText = this.$route.query.editText;
        if (this.editType == "detail") {
            this.formData.courierId = this.$route.query.editId;
            this.formData.beginTime = this.$route.query.beginTime;
            this.formData.endTime = this.$route.query.endTime;
            this._queryHorsemanOrderDetailInfo();
        }
    },
    methods: {
        /*----------------------------查询操作----------------------------*/
        //查询骑手派单数据信息表格数据
        _queryHorsemanOrderDetailInfo() {
            this.loading = true;
            queryHorsemanOrderDetailInfo(this.formData)
                .then(res => {
                    this.loading = false;
                    this.tableData = res.list;
                    this.total = res.totalCount;
                })
                .catch(err => {
                    this.loading = false;
                    this.$message.error(err.message);
                });
        },
        //页码切换
        handleCurrentChange(val) {
            this.formData.pageNum = val;
            this._queryHorsemanOrderDetailInfo();
        },
        //每页展示条数的切换
        handleSizeChange(val) {
            this.formData.pageSize = val;
            this._queryHorsemanOrderDetailInfo();
        },
        //点击查询
        handleSearch() {
            this.formData.pageNum = 1;
            this.formData.pageSize = 10;
            this._queryHorsemanOrderDetailInfo();
        },
        //点击清空
        handleClear() {
            this.formData.beginTime = "";
            this.formData.endTime = "";
            this.formData.pageNum = 1;
            this.formData.pageSize = 10;
            this.$message({
                type: "success",
                message: "清空成功!"
            });
            this._queryHorsemanOrderDetailInfo();
        },

        /*----------------------------查看订单操作----------------------------*/
        handelDetail(row) {
            this.showTimeoutCon = true;
            this._queryOrderDetailInfo(row);
        },
        //查看订单详情表格数据
        _queryOrderDetailInfo(row) {
            var data = {
                courierId: this.formData.courierId,
                time: row.time
            };
            queryOrderDetailInfo(data)
                .then(res => {
                    this.detialTableData = res;
                })
                .catch(err => {
                    this.$message.error(err.message);
                });
        },

        /*----------------------------时间处理操作----------------------------*/
        timeTransform(timeNum) {
            var mss = Math.abs(timeNum);
            var days = parseInt(mss / (60 * 24));
            var hours = parseInt((mss % (60 * 24)) / 60);
            var minutes = parseInt(mss % 60);
            if (days > 0) {
                return days + " 天 " + hours + " 小时 " + minutes + " 分钟 ";
            } else if (hours > 0) {
                return hours + " 小时 " + minutes + " 分钟 ";
            } else {
                return minutes + " 分钟 ";
            }
        }
    },
    components: {
        "m-pagination": mPagination
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.table-con {
    margin-top: 10px;
}
</style>